<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.v-on</title>
    <script src="./vue.global.js"></script>
</head>
<body>
<div id="vueApp"></div>
<script>
    window.app = Vue.createApp({
        data() {
            return { message:'color:red', name: 'title', event:'click'};
        },
        template:`
          <div>
            <div>name:{{name}}</div>
            <div>message:{{message}}</div>
            <div>event:{{event}}</div>
            <i v-bind:[name]='message' @[event]='() => {this.name = this.name === "title" ? "style" : "title" ;this.event = this.event === "mouseenter" ? "click":"mouseenter"}'>当前设置属性为:{{name}}，{{name + '="' + message + '"'}}，{{ this.event === "mouseenter" ? "鼠标移入":"点击"}}切换</i>
          </div>
          <form action="https://www.baidu.com" @click="(e) => {e.preventDefault();}">
            <button type="submit" >提交</button>
          </form>
          `,
    });
    window.vm = app.mount("#vueApp");
</script>
</body>
</html>